"use client"

import { View, Text, StyleSheet } from "react-native"
import Svg, { Circle, G } from "react-native-svg"
import Animated, { useAnimatedProps, useSharedValue, withTiming } from "react-native-reanimated"
import { useEffect } from "react"
import { theme } from "../../constants/theme"

const AnimatedCircle = Animated.createAnimatedComponent(Circle)

interface ProgressRingProps {
    mastered: number
    learning: number
    total: number
    size: number
    strokeWidth: number
}

export function ProgressRing({ mastered, learning, total, size = 150, strokeWidth = 12 }: ProgressRingProps) {
    const radius = (size - strokeWidth) / 2
    const circumference = radius * 2 * Math.PI

    const masteredProgress = useSharedValue(0)
    const learningProgress = useSharedValue(0)
    const remainingProgress = useSharedValue(0)
    const scaleValue = useSharedValue(0.8)

    // 未学习的颜色 - 修改为紫色系
    const notLearnedColor = "#9C6ADE" // 紫色系，与蓝色背景形成更好的对比

    // 确保在数据变化时重新计算和动画
    useEffect(() => {
        masteredProgress.value = withTiming(mastered / total, { duration: 1500 })
        learningProgress.value = withTiming(learning / total, { duration: 1500 })
        remainingProgress.value = withTiming((total - mastered - learning) / total, { duration: 1500 })
        scaleValue.value = withTiming(1, { duration: 800 })
    }, [mastered, learning, total, masteredProgress, learningProgress, remainingProgress, scaleValue])

    const masteredProps = useAnimatedProps(() => {
        const strokeDashoffset = circumference - masteredProgress.value * circumference
        return {
            strokeDashoffset,
        }
    })

    const learningProps = useAnimatedProps(() => {
        const startOffset = masteredProgress.value * circumference
        const endOffset = circumference - (masteredProgress.value + learningProgress.value) * circumference
        return {
            strokeDashoffset: endOffset,
            strokeDasharray: `${circumference - startOffset - endOffset} ${startOffset + endOffset}`,
        }
    })

    const remainingProps = useAnimatedProps(() => {
        const startOffset = (masteredProgress.value + learningProgress.value) * circumference
        const endOffset =
            circumference - (masteredProgress.value + learningProgress.value + remainingProgress.value) * circumference
        return {
            strokeDashoffset: endOffset,
            strokeDasharray: `${circumference - startOffset - endOffset} ${startOffset + endOffset}`,
        }
    })

    const containerAnimatedStyle = useAnimatedProps(() => {
        return {
            transform: [{ scale: scaleValue.value }],
        }
    })

    const percentage = Math.round((mastered / total) * 100)

    return (
        <Animated.View style={[styles.container, containerAnimatedStyle]}>
            <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
                <G rotation="-90" origin={`${size / 2}, ${size / 2}`}>
                    {/* Background Circle */}
                    <Circle
                        stroke="rgba(255, 255, 255, 0.2)"
                        fill="none"
                        cx={size / 2}
                        cy={size / 2}
                        r={radius}
                        strokeWidth={strokeWidth}
                    />

                    {/* Remaining Progress */}
                    <AnimatedCircle
                        stroke={notLearnedColor}
                        fill="none"
                        cx={size / 2}
                        cy={size / 2}
                        r={radius}
                        strokeWidth={strokeWidth}
                        animatedProps={remainingProps}
                        strokeLinecap="round"
                    />

                    {/* Learning Progress */}
                    <AnimatedCircle
                        stroke={theme.colors.secondary.orange.default}
                        fill="none"
                        cx={size / 2}
                        cy={size / 2}
                        r={radius}
                        strokeWidth={strokeWidth}
                        animatedProps={learningProps}
                        strokeLinecap="round"
                    />

                    {/* Mastered Progress */}
                    <AnimatedCircle
                        stroke={theme.colors.secondary.green.default}
                        fill="none"
                        cx={size / 2}
                        cy={size / 2}
                        r={radius}
                        strokeWidth={strokeWidth}
                        strokeDasharray={circumference}
                        animatedProps={masteredProps}
                        strokeLinecap="round"
                    />
                </G>
            </Svg>

            <View style={styles.content}>
                <View style={styles.percentageContainer}>
                    <Text style={styles.percentageText}>{percentage}%</Text>
                    <Text style={styles.percentageLabel}>已掌握</Text>
                </View>
            </View>
        </Animated.View>
    )
}

const styles = StyleSheet.create({
    container: {
        alignItems: "center",
        justifyContent: "center",
        width: "100%",
    },
    content: {
        position: "absolute",
        alignItems: "center",
        justifyContent: "center",
        width: "100%",
        height: "100%",
    },
    percentageContainer: {
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.2)",
        borderRadius: 30,
        width: 60,
        height: 60,
        borderWidth: 1,
        borderColor: "rgba(255, 255, 255, 0.3)",
    },
    percentageText: {
        fontSize: 18,
        fontWeight: "700",
        color: theme.colors.neutral.white,
    },
    percentageLabel: {
        fontSize: 10,
        color: theme.colors.neutral.white,
        opacity: 0.9,
    },
})

